<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form inline size="small" @submit.native.prevent>
        <!--        <el-form-item label="奖品名称">-->
        <!--          <el-input v-model="listPram.prizeName" placeholder="奖品名称" maxlength="30"></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item>-->
        <!--          <el-button icon="el-icon-search" size="mini" type="primary" @click.native="getList">搜索</el-button>-->
        <!--          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
        <!--        </el-form-item>-->
        <el-form-item>
          <span style="font-weight: bold;color: red">设置好奖品后需要点击最下方确定方可生效</span>
        </el-form-item>
        <el-form-item class="el-form-item-align-right">
          <el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="openEdit(0)"
                     v-has-permi="['admin:prize:save']">添加
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="listData.prizeList"
                :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}"
                border size="mini">
        <el-table-column label="商品名称" min-width="130" prop="prizeName"/>
        <el-table-column label="商品类型" min-width="130" prop="prizeType">
          <template slot-scope="scope">
            <div v-if="scope.row.prizeType===1">实物</div>
            <div v-else-if="scope.row.prizeType===2">益积分</div>
            <div v-else-if="scope.row.prizeType===3">益联券</div>
            <div v-else-if="scope.row.prizeType===4">谢谢参与</div>
          </template>
        </el-table-column>
        <el-table-column label="中奖概率" min-width="130" prop="weight"/>
        <el-table-column label="奖品图片" prop="prizeImage">
          <template slot-scope="scope">
            <el-image :src="imageUrl + scope.row.prizeImage"
                      :preview-src-list="preList"
                      @click="preview(imageUrl + scope.row.prizeImage)"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" min-width="180">
          <template slot-scope="scope">
            <el-button v-has-permi="['admin:prize:save']" icon="el-icon-edit" size="mini" type="primary"
                       @click="openEdit(1,scope.row)">编辑
            </el-button>
            <el-button v-has-permi="['admin:prize:delete']" icon="el-icon-delete" size="mini" type="danger"
                       @click="handlerDelete(scope.$index,scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form inline size="small" @submit.native.prevent style="margin-top: 20px;">
        <el-form-item class="el-form-item-align-right">
          <el-button @click="hideEditDialog">取 消</el-button>
          <el-button type="primary" @click="handlerEdit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog
        :close-on-click-modal="false"
        :title="editDialog.id? '编辑':'新增'"
        :visible.sync="editDialog.show"
        destroy-on-close
        :modal="false"
        top="120px"
        width="800px">
      <edit
          v-if="editDialog.show"
          :is-create="editDialog.isCreate"
          :edit-data="editDialog.editData"
          :index-key="editData.indexKey"
          ref="editForm"
          @hideEditDialog1="hideEditDialog1"
          @addHideSaveEditDialog="addHideSaveEditDialog"
          @addHideEditDialog="addHideEditDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
import edit from './edit'
import {checkPermi} from "@/utils/permission";
import {save} from "@/api/prize";

export default {
  props: {
    id: {
      default: null
    },
    editData: {
      type: Object
    },
    indexKey: {
      type: Number
    }
  },
  components: {edit},
  data() {
    return {
      preList:[],
      imageUrl: '',
      listData: {
        prizeList: [],
        prizeEdit: [],
        gameId: null,
        id: null
      },
      listPram: {
        prizeName: '',
      },
      editDialog: {
        show: false,
        isCreate: 0,
        editDate: {},
        indexKey: null
      },
      tableLoading: false,
      isReceiveList: [{id: 1, data: '已领取'}, {id: 0, data: '未领取'}]
    }
  },
  mounted() {
    this.imageUrl = process.env.VUE_APP_IMAGE_URL
    this.getList()
  },
  methods: {
    preview(url)
    {
      this.preList=[];
      this.preList.push(url)
    },
    checkPermi,
    getList() {
      const {prizeList, prizeId} = JSON.parse(JSON.stringify(this.editData)) //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.listData.prizeList = prizeList || []
      this.listData.id = prizeId
      this.listData.prizeEdit = []
    },
    openEdit(isCreate, editDate) {
      this.editDialog.isCreate = isCreate;
      this.editDialog.show = true
      this.editDialog.editData = editDate
      let index = this.listData.prizeList.indexOf(editDate);
      this.editData.indexKey = index;
    },
    handlerDelete(key, row) {
      //删除单行简历数据
      const _xKey = key
      this.listData.prizeList.splice(_xKey, 1);//index 当前元素索引；1：需要删除的元素个数

      if (this.id && row.id) {
        //编辑时的删除，记录删除ID
        const delId = row.id

        this.listData.prizeEdit = this.listData.prizeEdit.filter(item => item.id !== delId)
        this.listData.prizeRemove += delId + ','
      }
    },
    addHideSaveEditDialog(data) {
      setTimeout(() => {
        this.listData.prizeList.push(data);
        this.editDialog.show = false
      }, 200);
    },
    addHideEditDialog(data, key) {
      setTimeout(() => {
        this.$set(this.listData.prizeList, key, data) //更新数组中指定下标的元素

        if (this.isCreat && data.id) {
          //原有数据的编辑
          this.listData.prizeEdit.push(data)
        }
        this.editDialog.show = false
      }, 200);
    },
    handlerEdit() {
      this.listData.gameId = this.id
      if (this.listData.prizeList.length != 6) {
        this.$message.error("需要配置6项才能上线抽奖活动哦")
      }else{
        save(this.listData).then(data => {
          this.$message.success('添加成功')
          this.$emit('editListDialog')
        })
      }

    },
    hideEditDialog() {
      this.$emit('editListDialog')
      this.editDialog.show = false
      this.getList()
    },
    hideEditDialog1() {
      this.editDialog.show = false
      this.getList()
    },
    resetQuery() {
      this.listPram.prizeName = '';
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">

</style>

<style scoped>

</style>
